<template>
	<view class="container">
		<u-mask :show="value" :opacity="0" :duration="0" :z-index="10201" @click="$emit('input', false)">
			<view class="menu-container" @touchmove="$emit('input', false)">
				<view class="u-radius-10 menu-box" @tap.stop>
					<view v-for="(item, index) in menus" :key="index"
						:class="['flex-center u-f-30', index > 0 ? 'u-m-t-30' : '']" @click="$emit('change', item)">
						<image :src="item.icon" style="width: 30rpx; height: 30rpx"></image>
						<view class="u-m-l-12">{{ lang_common[item.key] }}</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				default: false
			},
		},
		data() {
			let menus = ['share', 'report'].map(item => {
				return {
					key: item,
					icon: require(`@/static/image/common/${ item }.png`)
				}
			})
			return {
				menus
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.container /deep/ .u-mask.u-mask-zoom {
		background: rgba(0, 0, 0, 0) !important;
	}
	
	.container /deep/ .uni-scroll-view>.uni-scroll-view {
		overflow: visible !important;
	}
	
	.menu {
		&-container {
			position: relative;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
		}

		&-box {
			position: absolute;
			top: calc(var(--status-bar-height) + 80rpx);
			right: 30rpx;
			padding: 30rpx;
			min-width: 100rpx;
			min-height: 50rpx;
			background-color: #ffffff;
			box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.07);
			border: 2rpx solid #EAEAEA;
			border-radius: 10rpx;
		}

		&-box::after {
			content: '';
			position: absolute;
			top: -16rpx;
			right: 20rpx;
			width: 30rpx;
			height: 30rpx;
			transform: rotate(-45deg);
			background-color: #FFFFFF;
			border-top: 2rpx solid #EAEAEA;
			border-right: 2rpx solid #EAEAEA;
		}
	}
</style>
